<template>
    <div>
        <van-nav-bar
            title="发布文章"
            left-arrow
            @click-left="onClickLeft"
        />

        <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
            v-model="name"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
            v-model="title"
            name="标题"
            label="标题"
            placeholder="标题"
            />
            <van-field
                v-model="content"
                rows="2"
                autosize
                label="内容"
                type="textarea"
                maxlength="50"
                placeholder="请输入内容"
                show-word-limit
                :rules="[{ required: true, message: '请填写内容' }]"
            />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" @click="btn" native-type="submit">
            提交
            </van-button>
        </div>
        </van-form>


    </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';
import router from '@/router';
    export default {
        setup() {
            const name = ref('');
            const title = ref('');
            const content = ref('');
            const onClickLeft = () => history.back();

            return { name, title, content ,onClickLeft};
        },
        created() {
            axios.get('http://localhost:8087/article/selectAll').then((res)=>{
                this.wenzhs = res.data.data
                console.log(this.wenzhs.length)
            })
        },
        methods: {
            btn() {
                axios.post("http://localhost:8087/article/save", {
                    articleId: Math.random()*100000,
                    articleUser: this.name,
                    articleContent: this.content,
                    articleTitle: this.title,
                    articleImage: this.file,
                }).then(function () {
                    router.push("/two")
                }).catch(function (error) {
                    console.log(error);
                })
            }
        },
    };

</script>

<style lang="scss" scoped>
    .imgs{
        left: -39vw;
    }
</style>